<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Log Viewer</title>
    
    <link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.8.2.custom.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
	<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
    
    <style type="text/css">
	html, body {
	    margin: 10;
	    padding: 10;
	    font-size: 75%;
	}
	
	.jqplot-point-label {white-space: nowrap;}
    div.jqplot-target {
        height: 200px;
        width: 300px;
        margin: 10px;
    }
    
    #errorDetail {background:#ddd; width:400px; height:160px; padding:20px; margin: 20px; padding: 10px;}
	</style>
	    
    <!--  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
    -->
    <!--  
    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    -->
    
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.json-2.2.min.js"></script>
    
    <script type="text/javascript" src="js/i18n/grid.locale-en.js"></script>
	<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
	
	<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
	<script type="text/javascript" src="js/plugins/jqplot.json2.min.js"></script>
	
	<script type="text/javascript" src="js/jquery.corner.js"></script>
		
    <script type="text/javascript">
    jQuery(function($) {
    	
        function processEvents(events) {
        	for (var i in events) {
                //$('#logs').append('<span>' + events[i].no + ', ' + events[i].loginUser + ', ' + events[i].loginIpAddress + ', ' + events[i].subSystem + ', ' + events[i].menu + ', ' + events[i].responsePerson + ', ' + events[i].layer + ', <span style="color: blue;">' + events[i].errorCategory + '</span>, ' + events[i].errorMessage + ', ' + events[i].timeStamp + '</span><br/>');
                //$('#logs').append('<span>[event] ' + events[i] + '</span><br/>');
                
                var totalcount = parseInt($("#totalcount").val()) + 1;
                var criticalcount = parseInt($("#criticalcount").val()) + 1;
                var errorcount = parseInt($("#errorcount").val()) + 1; 
                var warningcount = parseInt($("#warningcount").val()) + 1;         
                var commonexcount = parseInt($("#commonexcount").val()) + 1;
                var dpexcount = parseInt($("#dpexcount").val()) + 1;    
                var serviceexcount = parseInt($("#serviceexcount").val()) + 1;
                
                if(events[i].errorCategory == 'Critical'){
					$("#criticalcount").val(criticalcount);
                }
                
                if(events[i].errorCategory == 'Error'){               
               		$("#errorcount").val(errorcount);
                }
                
                if(events[i].errorCategory == 'Warning'){                
               		$("#warningcount").val(warningcount);
                }
                
                // sub system
                if(events[i].subSystem == 'common'){                 
               		$("#commonexcount").val(commonexcount);
                }
                
             	// menu
                if(events[i].menu == 'dp'){                   
               		$("#dpexcount").val(dpexcount);
                }
             	
             	// layer
                if(events[i].layer == 'service'){                
               		$("#serviceexcount").val(serviceexcount);
                }
             	
             	// jquery grid
                // var datarow = {id:"99",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"};
             	var datarow = {id:events[i].no, loginUser:events[i].loginUser, loginIpAddress:events[i].loginIpAddress, subSystem:events[i].subSystem, menu:events[i].menu, responsePerson:events[i].responsePerson, layer:events[i].layer, errorCategory:events[i].errorCategory, errorMessage:events[i].errorMessage, timeStamp:events[i].timeStamp}; //'no', 'loginUser'
            	var su=jQuery("#list").jqGrid('addRowData',parseInt(events[i].no),datarow);

            }
        }

        function long_polling() {
            $.getJSON('logViewer', function(events) {
                processEvents(events);
                long_polling();
            });
        }

        long_polling();
        
      	// jquery grid
        // logViewer
        
        var lastSel;
      	        
        $("#list").jqGrid({        
           	url:'',
        	datatype: "json",
           	colNames:[/*'id', */'id', 'loginUser', 'loginIpAddress', 'subSystem','menu','responsePerson','layer','errorCategory','errorMessage','timeStamp'],
           	colModel:[
				/*{name:'uid',index:'id', width:120},*/      
           		{name:'id',index:'no', width:40},
           		{name:'loginUser',index:'loginUser', width:80},
           		{name:'loginIpAddress',index:'loginIpAddress', width:60},
           		{name:'subSystem',index:'subSystem', width:60},
           		{name:'menu',index:'menu', width:50},
           		{name:'responsePerson',index:'responsePerson', width:50},
           		{name:'layer',index:'layer', width:50},
           		{name:'errorCategory',index:'errorCategory', width:70},
           		{name:'errorMessage',index:'errorMessage', width:100},
           		{name:'timeStamp',index:'timeStamp', width:170}	
           	],
           	rowNum:10,
           	rowList:[10,20,30],
           	pager: '#pager',
           	sortname: 'no',
            viewrecords: true,
            sortorder: "desc",
            caption:"Total Logs",
            //editurl:"someurl.php"
            /*
            onSelectRow: function(rowid){ 
                if(rowid && rowid!==lastSel){ 
                   //jQuery('#list').restoreRow(lastSel); 
                   lastSel=rowid;
                   alert(rowid);
                } 
            }*/
        }).navGrid("#pager",{edit:false,add:false,del:false})
        .click( function(){
        	var id = $("#list").jqGrid('getGridParam','selrow');
        	if (id)	{
        		var ret = $("#list").jqGrid('getRowData',id);
        		$("#errorDetail").text(ret.errorMessage);
        		$("#errorDetail").corner("bevel 8px").parent().css('padding', '5px').corner("bevel 10px"); 
        	} else { alert("Please select row");}
        });

        
        // chart
      // Our ajax data renderer which here retrieves a text file.
  	  // it could contact any source and pull data, however.
  	  // The options argument isn't used in this renderer.
  	  var ajaxDataRenderer = function(url, plot, options) {
  	    var ret = null;
  	    $.ajax({
  	      // have to use synchronous here, else the function 
  	      // will return before the data is fetched
  	      async: false,
  	      url: url,
  	      dataType:"json",
  	      success: function(data) {
  	        ret = data;
  	      }
  	    });
  	    return ret;
  	  };
  	
  	  // The url for our json data
  	  var jsonurl = "chartJson.do";
  	
  	  // passing in the url string as the jqPlot data argument is a handy
  	  // shortcut for our renderer.  You could also have used the
  	  // "dataRendererOptions" option to pass in the url.
  	  var plot2 = $.jqplot('chart2', jsonurl,{
  	    title: "Error Log Progress",
  	    dataRenderer: ajaxDataRenderer,
  	    dataRendererOptions: {
  	      unusedOptionalUrl: jsonurl
  	    }
  	  });
  	  
  	  // corner
  	  $("#errorDetail").corner("bevel 8px").parent().css('padding', '5px').corner("bevel 10px");   

    });

    </script>
</head>
<body>

<table id="list"><tr><td/></tr></table> 
<div id="pager"></div>
<div style="float:left;" class="example-plot" id="chart2"></div>
<div style="float:left;" class="example-plot" id="errorDetail"></div>
<div style="clear:both;"></div>

<div id="count">
	실시간 경고 리스트 <br/>
	Critical: <input style="width:3" id="criticalcount" value="0" /><br/>
	Error: <input id="errorcount" value="0" /><br/>
	Warning: <input id="warningcount" value="0" /><br/>
</div>
<div id="count_module">
	<br/>서브모듈별 에러 카운트<br/>
	common: <input id="commonexcount" value="0" /><br/>
	admin: <input id="adminexcount" value="0" /><br/>
	framework: <input id="adminexcount" value="0" /><br/>
	statistics: <input id="statexcount" value="0" /><br/>
	sampling: <input id="samplingxcount" value="0" /><br/>
</div>
<div id="count_menu">
	<br/>메뉴별 에러 카운트<br/>
	mp: <input id="mpexcount" value="0" /><br/>
	dp: <input id="dpexcount" value="0" /><br/>
	s&op: <input id="snopexcount" value="0" /><br/>
	fp: <input id="fpexcount" value="0" /><br/>
</div>
<div id="count_layer">
	<br/>응용시스템 레이어별 에러 카운트<br/>
	web: <input id="webexcount" value="0" /><br/>
	service: <input id="serviceexcount" value="0" /><br/>
	business: <input id="businessexcount" value="0" /><br/>
	dao: <input id="daoexcount" value="0" /><br/>
</div>
</body>
</html>
